<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>waterfallFlow</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <div v-for="(item, index) in blockList" :index="index">
      <!-- <div> -->
      <!-- <div :style="{width: 100px, height: 100px, border-width: 1px, border-style: solid, border-color: red}"> -->
      <div v-bind:style="`height: ${item.height}px;width: ${item.width}px;border:3px solid gray;float: left;margin: 10px;`">
        {{item.number}}
      </div>
    </div>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: function () {
      return {
        blockList: [
          {width: '200', height: '300', number: '1'},
          {width: '200', height: '320', number: '2'},
          {width: '200', height: '200', number: '3'},
          {width: '200', height: '280', number: '4'},
          {width: '200', height: '290', number: '5'},
          {width: '200', height: '170', number: '6'},
        ]
      }
    },
    created () {
      console.log(document.body.clientWidth)
    }
  })
</script>
</html>